<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        min-width: 400px;
        max-width: 800px;
        display: flex;
        justify-content: flex-end;
      }

      .avatar {
        overflow: hidden;
        width: 48px;
        height: 48px;
        margin-right: 20px;
        border-radius: 50%;
        background: url(./images/avatar.jpg) no-repeat center / cover;
      }

      .wrapper textarea {
        flex: 1;
        height: 30px;
        padding: 10px;
        border-color: transparent;
        outline: none;
        resize: none;
        background: #f5f5f5;
        border-radius: 4px;
        transition: all 0.5s;
      }

      .wrapper textarea:focus {
        height: 50px;
        border-color: #e4e4e4;
        background: #fff;
      }

      .wrapper button {
        width: 70px;
        margin-left: 10px;
        border: none;
        color: #fff;
        background: #00aeec;
        border-radius: 4px;
        cursor: pointer;
      }

      .wrapper .total {
        margin-right: 80px;
        margin-top: 5px;
        color: #999;
        opacity: 0;
        transition: all 0.5s;
      }

      .list {
        display: flex;
        min-width: 400px;
        max-width: 800px;
      }

      .list .item {
        display: flex;
        width: 100%;
      }

      .list .item .info {
        flex: 1;
        border-bottom: 1px dashed #e4e4e4;
        padding-bottom: 10px;
      }

      .list .item p {
        margin: 0;
      }

      .list .item .name {
        color: #fb7299;
        font-size: 14px;
        font-weight: bold;
      }

      .list .item .text {
        padding: 10px 0;
        color: #333;
        font-size: 13px;
      }

      .list .item .time {
        color: #999;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <i class="avatar"></i>
      <textarea
        id="tx"
        placeholder="发一条友善的评论"
        rows="2"
        maxlength="200"
      ></textarea>
      <button>发布</button>
    </div>
    <div class="wrapper">
      <span class="total">0/200字</span>
    </div>
    <div class="list">
      <div class="item" style="display: none">
        <i class="avatar"></i>
        <div class="info">
          <p class="name">清风徐来</p>
          <p class="text">
            大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
          </p>
          <p class="time">2099-10-10 20:29:21</p>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  // 需求1. 文本域获取焦点 则让total 透明度改为1， 失去焦点的时候 透明度0
  const txt = document.querySelector("#tx");
  const total = document.querySelector(".total");

  txt.addEventListener("focus", function () {
    total.style.opacity = 1;
  });

  txt.addEventListener("blur", function () {
    if (txt.value.length !== 0) return;
    total.style.opacity = 0;
  });

  // 需求2. 得到用户数的字符长度， 写到total盒子里面
  // txt.addEventListener('keyup',function () {
  //     // 模板字符串拼接长度length
  //     total.innerHTML=`${txt.value.length}/200字`
  //   })
  // imput 顺畅一些
  txt.addEventListener("input", function () {
    // 模板字符串拼接长度length
    total.innerHTML = `${txt.value.length}/200字`;
  });

  //   需求3.用户按下回车，可以发表评论
  //        获取发表区元素
  const item = document.querySelector(".item");
  const text = document.querySelector(".text");

  // 3.1绑定keyup事件
  txt.addEventListener("keyup", function (e) {
    // 3.2判断是否按下enter键
    if (e.key === "Enter") {
      //   console.log("用户按下enter");
      //   item.style.display= 'block'
      btn.click(); //看一下简写
      //   回复显示div
      //   item.style.display = "flex";
      // 设置评论区内容
      //   text.innerHTML = txt.value;
      // 清空输入框
      //   txt.value = "";
    }
  });

  //   需求4.点击发布按钮可以发表评论
  const btn = document.querySelector("button");
  btn.addEventListener("click", function () {
    item.style.display = "flex";
    text.innerHTML = txt.value;
    txt.value = "";
  });
</script>
